<template>
	<div>
		<div class="search">
			<input v-model="keyword"  class="search-input" type="text" placeholder="输入城市名或拼音"/>
		</div>
		<div class="search-content" ref="search" v-show="keyword">
			<ul>
				<li v-for="item of list" :key="item.id" @click="handleCityClick(item.name)" class="search-item border-bottom">{{item.name}}</li>
				<li class="notice-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
			</ul>
		</div>
	</div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
	name:'CitySearch',
	props:{
		cities:Object
	},
	data () {
		return {
			keyword: '',
		    list: [],
		    timer: null
		}
	},
	methods:{
		// handleCityClick(city){
		// 	this.$store.commit('changeCity',city)
		// 	this.$router.push('/')
		// }
		handleCityClick(city){
			// this.$store.dispatch('changeCity',city)
			//this.$store.commit('changeCity',city)
			this.changeCity(city)
			this.$router.push('/')
		},
		...mapMutations(['changeCity'])
	},
	computed:{
		hasNoData () {
			return !this.list.length
		}
	},
	watch: {
	    keyword () {
		if (this.timer) {
			clearTimeout(this.timer)
		}
		if (!this.keyword) {
			this.list = []
			return
		}
		this.timer = setTimeout(() => {
			const result = []
			for (let i in this.cities) {
				this.cities[i].forEach((value) => {
			    if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
						result.push(value)
			    	}
			  	})
			}
			this.list = result
			}, 100)
		}
  	},
  	mounted () {
    	this.scroll = new Bscroll(this.$refs.search)
  	}
}	
</script>

<style lang="stylus" scoped>
@import '~styles/veribles.styl'
.search
	height:.72rem
	padding:0 .1rem
	background:$bgColor
	box-sizing: border-box;
	.search-input
		height:.62rem
		width:100%
		padding:0 .1rem
		line-height:.62rem
		text-align:center
		border-radius:.06rem
		color:#666
		box-sizing: border-box;
.search-content
	z-index:1
	overflow:hidden
	position:absolute
	top:1.58rem
	left:0
	right:0
	bottom:0
	background:#f5f5f5
	.search-item
		line-height:.62rem
		padding-left:.2rem
		background:#fff
		color:#666
	.notice-item
		text-align:center
		padding:2rem
</style>